<template>
    <div>
        <m-table :columns="columns" :data="permissionData" :pagination="false" :title="$route.meta.title"
            :default-expand-all-rows="true" :loading="loading">
            <template #extra>
                <a-button v-perms="['/adminapi/system.auth.permission/save']" type="primary" shape="round" @click="handleEdit('add')">
                    <template #icon>
                        <icon-plus />
                    </template>
                </a-button>
            </template>
            <template #icon="{ record }">
                <m-form-icon :name="record.icon" />
            </template>

            <template #type="{ record }">
                <a-tag v-if="record.type == MenuType.CATALOGUE" color="blue">目录</a-tag>
                <a-tag v-else-if="record.type == MenuType.MENU" color="green">菜单</a-tag>
                <a-tag v-else-if="record.type == MenuType.BUTTON" color="red">按钮</a-tag>
            </template>
            <template #action="{ record }">
                <a-space>
                    <a-button v-perms="['/adminapi/system.auth.permission/save']" type="primary" v-if="record.type != MenuType.BUTTON" shape="round"
                        @click="handleEdit('add', { parent_id: record.id })">
                        <template #icon>
                            <icon-plus />
                        </template>
                    </a-button>

                    <a-button v-perms="['/adminapi/system.auth.permission/update']" type="primary" status="success" shape="round" @click="handleEdit('edit', record)">
                        <template #icon>
                            <icon-edit />
                        </template>
                    </a-button>
                    <a-popconfirm :content="`确定删除 [${record.name}] 吗？ 如果存在子级,请先删除子级`" @ok="handleDelete(record)">
                        <a-button v-perms="['/adminapi/system.auth.permission/delete']" shape="round" type="primary" status="danger">
                            <template #icon>
                                <icon-delete />
                            </template>
                        </a-button>
                    </a-popconfirm>
                </a-space>
            </template>
        </m-table>
        <EditPopup ref="editPopup" @success="run" />
    </div>
</template>

<script setup lang="ts">
import EditPopup from './components/edit.vue'
import { useRequest } from 'vue-request'
import { getPermission } from '@/api/system/auth/permission'
import { MenuType } from '@/utils/enums/menuEnums'
const editPopup = ref<InstanceType<typeof EditPopup>>()

const { data: permissionData, run, loading } = useRequest(getPermission, {
    manual: true
})

// 组件挂载时加载数据
onMounted(() => {
    run()
})

const handleEdit = (type: string, record?: any) => {
    editPopup.value?.open(type)
    if (record) {
        // 等待弹窗打开后再设置数据
        nextTick(() => {
            editPopup.value?.setFormData(record)
        })
    }
}

const handleDelete = (record: any) => {
    console.log(record)
}



const columns = [
    {
        title: '权限名称',
        dataIndex: 'name',
        width: 200,
    },
    {
        title: '路由地址',
        dataIndex: 'path',
        width: 150,
    },
    {
        title: '权限地址',
        dataIndex: 'perms',
        width: 350,
        
    },
    {
        title: '图标',
        dataIndex: 'icon',
        slotName: 'icon',
        width: 150,
        align: 'center',
    },
    {
        title: '属性',
        dataIndex: 'type',
        slotName: 'type',
        width: 150,
        align: 'center',
    },
    {
        title: '创建时间',
        dataIndex: 'create_time',
        width: 250,
    },
    {
        title: '操作',
        dataIndex: 'action',
        fixed: 'right',
        width: 200,
        slotName: 'action',
    },
]
</script>

<style scoped lang="scss"></style>